<div class="viewer-overlay" style="overflow: hidden;" ng-style="{'width': width + 'px', 'height': height + 'px'}">
    <div class="viewer-overlay">
        <div class="cursor">
            <img class="cursor-arrow" src=""/>
            <div class="cursor-highlighter"></div>
        </div>
    </div>
    <div class="viewer-overlay click-elements-overlay"></div>
    <div ng-show="shouldShowVisibilityOverlay">
        <div class="visibility-overlay"></div>
        <div class="visibility-overlay-info" layout="column" layout-align="center center">
            <i class="icon ion-ios-albums-outline ion-icon visibility-overlay-icon"></i>
            <div layout="column" layout-align="center center" ng-show="visibilityState === 'prerender'">
                <h3 class="visibility-overlay-message">The page is prerendered by the browser. It's still not visible to the user.</h3>
                <span class="visibility-overlay-details">document.visibilityState: prerender</span>
            </div>
            <div layout="column" layout-align="center center" ng-show="visibilityState === 'hidden'">
                <h3 class="visibility-overlay-message">The user is browsing in a different tab or the browser is minimized.</h3>
                <span class="visibility-overlay-details">document.visibilityState: hidden</span>
            </div>
        </div>
    </div>
    <div class="player-loader-container"
         ng-show="shouldShowRenderingOverlay">
        <div class="player-loader">
            <div class="player-loader-background">
                <div class="player-loader-filler" ng-style="{width: renderingProgressPercentage + '%'}"></div>
            </div>
            <span class="loader-footer">Rendering</span>
            <span class="loader-footer align-right">{{ renderingProgressPercentage ? renderingProgressPercentage + '%' : null }}</span>
        </div>
    </div>
    <div class="player-loader-container" ng-show="shouldShowBufferingOverlay">
        <div class="player-loader">
            <div class="loader"></div>
            <div class="loader-footer">Buffering</div>
        </div>
    </div>
</div>
